<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	body{
		margin: 0;
		padding: 0;
	}
	.boxa,.boxb,.boxc{
		width: 300px;
		height: 300px;
		float: left;
		border:1px skyblue solid;
		margin-right: 5px
	}
	.boxa{
		background-image: linear-gradient(to left,skyblue,green);
	}
	.boxb{
		 background-image: radial-gradient(aqua,white,red);
	}
	.boxc{
		background-image: repeating-linear-gradient(90deg,pink 2%,skyblue 10%,green 5%)
	}
	</style>
<body>
	<div class="boxa"></div>
	<div class="boxb"></div>
	<div class="boxc"></div>
</body>
</html>
